<template>
	<div style="display: flex;flex-direction: column;" class="otherPage contactUs">
		<Header :selected="9"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover;':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="2" :bgColor="bgColor">
		</Navigation>
		<div class="content" style="min-height: 600px;">
			<div class="content_bg" style="min-height: 600px;padding-top: 85px;">
				<el-col :xs="24" :sm="24" :md="6" :lg="6">
					&nbsp;
				</el-col>
				<el-col :xs="24" :sm="24" :md="12" :lg="12">
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="60px" class="demo-ruleForm">
						<el-form-item :label="$t('title')+':'" prop="title">
							<el-input v-model="ruleForm.title" :placeholder="$t('placeholderTitleErrorTip')" maxlength="15"></el-input>
						</el-form-item>
						<el-form-item :label="$t('name')+':'" prop="name">
							<el-input v-model="ruleForm.name" :placeholder="$t('placeholderName')"></el-input>
						</el-form-item>
						<el-form-item  :label="$t('email')+':'" prop="email">
							<el-input v-model="ruleForm.email" :placeholder="$t('placeholderEmail')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('telephone')+':'" prop="mobile">
							<el-input v-model="ruleForm.mobile" :placeholder="$t('placeholderMobile')"></el-input>
						</el-form-item>
						<el-form-item :label="$t('content')+':'" prop="content">
							<el-input type="textarea" :placeholder="$t('placeholderContent')"
								v-model="ruleForm.content"></el-input>
						</el-form-item>
						<el-form-item  :label="$t('verificationCode')+':'" prop="verificationCode">
							<el-input v-model="ruleForm.verificationCode" auto-complete="off"
								:placeholder="$t('placeholderVerificationCode')" style="width: 63%"
								@keyup.enter.native="submitForm('ruleForm')">
								<el-button slot='prepend' icon='el-icon-collection-tag'></el-button>
							</el-input>
							<div class="login-code">
								<img :title="$t('anotherOneTip')" :src="codeUrl" @click="getCode">
								<!-- 	<div title="图片找不到了" slot="error" class="image-slot">
										<i class="el-icon-picture-outline"></i>
									</div>
									<div class="placeholder">图片未加载的占位内容</div> -->
								<img>
							</div>
						</el-form-item>
						<el-form-item>
							<!-- 	<el-button type="primary" @click="submitForm('ruleForm')">{{$t("submitNow")}}</el-button> -->

							<div style="height: 100%;width: 270px;margin: 0 auto;">
								<el-button :loading="loading" style="height: 100%;width: 110px;" type="primary"
									@click="submitForm('ruleForm')">{{$t("submitNow")}}</el-button>
								<el-button @click="resetForm('ruleForm')">{{$t('resetting')}}</el-button>
							</div>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :xs="24" :sm="24" :md="6" :lg="6">
					&nbsp;
				</el-col>

			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import {
		v4 as uuidv4
	} from 'uuid';
	import {
		contactUsMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				loading: true,
				codeUrl: '',
				ruleForm: {
					name: '',
					title: '',
					email: '',
					mobile: '',
					content: '',
					codeId: ''
				},
				rules: {
					codeId: [{
						required: true,
						message: this.$t("verificationCodeTip"),
						trigger: 'blur'
					}],
					name: [{
							required: true,
							message: this.$t("placeholderName"),
							trigger: 'blur'
						},
						{
							min: 1,
							max: 255,
							message:  this.$t("between1To15Tip"),
							trigger: 'blur'
						}
					],
					title: [{
							required: true,
							message: this.$t('placeholderTitleErrorTip'),
							trigger: 'blur'
						},
						{
							min: 1,
							max: 15,
							message: this.$t("between1To15Tip"),
							trigger: 'blur'
						}
					],
					email: [{
						required: true,
						message: this.$t("placeholderEmail"),
						trigger: 'blur'
					}, {
						type: 'email',
						message: this.$t("correctEmailTip"),
						trigger: ['blur', 'change']
					}],
					mobile: [{
						required: true,
						message: this.$t("placeholderMobile"),
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: this.$t("placeholderContent"),
						trigger: 'blur'
					}]
				},
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: contactUsMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('contactUs'),
						to: '/contactUs'
					},
					{
						label: this.$t('complaintsAndSuggestions'),
						to: '/complaintsAndSuggestions'
					}
				],
				hoverIndex: -1,
				companyProfile: {
					content: ""
				}

			};
		},
		computed: {},
		created() {},
		mounted() {
			this.initPage();
			// 绑定监听事件
			window.addEventListener('keydown', this.keyDown);
			this.getCode();
			this.bindBg();
		},

		destroyed() {
			// 销毁事件
			window.removeEventListener('keydown', this.keyDown, false);
		},
		methods: {


			/**
			 * (1)(1)	获取投诉建议顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getComplaintAdviceTopImage(params).then(res => {
					this.bgImg = res.data.fileUrl
					this.loading = false;

				}).catch((error) => {
					console.log(error);
				});

			},
			save() {
				this.loading = true;
				return new Promise((resolve, reject) => {
					let params = this.ruleForm;
					let that = this;
					that.$request.saveComplaintAdvice(params).then(res => {
						resolve(res);
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			//////获取图片 和uuid
			getCode() {

				this.ruleForm.codeId = uuidv4();
				this.$request.getVerificationCode(this.ruleForm.codeId).then(res => {
					this.codeUrl = res;
				}).catch((err) => {
					console.log('err', err);
				});
			},
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.save().then(i => {
							if (i.code == 1000) {
								this.$notify({
									message: this.$t('successfullyTip'),
									position: 'bottom-right',
									type: 'success'
								});

							} else {
								this.$notify({
									message: this.$t('refreshCodeTip'),
									position: 'bottom-right',
									type: 'warning'
								});

							}
							this.getCode();
							this.loading = false;
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			////////// 提交
			keyDown(e) {
				// 回车则执行提交方法 enter键的ASCII是13
				if (e.keyCode == 13) {
					this.submitForm('ruleForm'); // 定义的方法
				}
			},
			resetForm(formName) {
				this.getCode()
				this.$refs[formName].resetFields();
			},
			initPage() {

			},
			gotoNewList() {
				this.$router.push({
					name: "党建新闻列表"
				});
			}

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/contactUs/contactUs.css");

	.login-code {
		width: 33%;
		display: inline-block;
		height: 38px;
		float: right;

		img {
			cursor: pointer;
			vertical-align: middle
		}
	}

	.login-code img {
		height: 38px;
		cursor: pointer;

	}

	.login-forget-pas {
		font-size: 14px;
		color: #2880E4;
		line-height: 20px;
		cursor: pointer;
		text-align: center;
	}

	.login-btn button {
		width: 100%;
		height: 44px;
		text-align: center;
		margin-bottom: 10px;
		background-color: #017EFF;
	}
	
	.content_bg {
		padding: 0;
		margin: 0 auto;
	}
	
	@media screen and (max-width: 1080px) {}
	
	
	
	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}
	
	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}
	
	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}
	}
	
	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}
	}
	
	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}
	
		.companyCultureImgArea {
			width: 60%;
		}
	
		.companyCultureContent {}
	
	}
	
	@media (max-width: 1720px) {
	
	
		.content_bg {
			width: calc(1720px * 0.8);
		}
	}
	
	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}
	}
	
	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}
	}
	
	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}
	}
	
	@media (max-width: 1024px) {}
	
	@media (max-width: 900px) {}
</style>
